@import "./mixin";

.classic-blue {
  @include create-theme(
    // 默认按钮背景色
    #1a5cd8,
    // 默认按钮边框色
    #165bdd,
    // 布局背景色
    #022b7e,
    // 布局背景图片
    "~@/assets/themes/images/bg-classic-blue.png",
    // 内容区域圆角颜色
    #1d56c1,
    // 菜单项下边框颜色
    #5699d117,
    // 菜单项三角形颜色
    #96abe87d,
    // 菜单项三角形悬浮颜色
    rgba(255, 255, 255, 0.8),
    // 菜单项激活颜色
    #0147c186,
    // 菜单面板颜色
    #0d3da3,
    // 侧边栏底部文字颜色
    #dfe2f599,
    // 侧边栏底部边框颜色
    #5582df5c,
    // Top 布局菜单激活时背景颜色1
    #022b7e,
    // Top 布局菜单激活时背景颜色2
    #1a5cd8,
    // Top 布局菜单下拉面板中菜单项激活时背景颜色
    #1a5cd8,
    // Horizontal 布局菜单项激活时的背景色
    #091fa900,
    // Horizontal 布局二级菜单栏的背景色
    #236af0,
    // Horizontal 布局二级菜单项激活时的背景色
    #1b5bd1
  );

  // .vxe-modal--wrapper .vxe-modal--header,
  // .bg-col {
  //   background: linear-gradient(-90deg, #1854c5 0%, #134db9 50%, #05399a 100%);
  // }

  .bk-map-drawer {
    border-color: #022b7e;
  }

  .bk-map-drawer .drawer-sidebar {
    background-color: #022b7e;
  }

  .drawer-sidebar.has-menu .trigger-icon::before {
    background: #113a86;
  }

  .custom-menu-item {
    background: url("~@/assets/themes/images/calssic-menu.png") no-repeat !important;
    background-size: 100% 100% !important;

    &:hover {
      background: url("~@/assets/themes/images/calssic-menu-hover.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
  }

  .custom-active-menu-item {
    background: url("~@/assets/themes/images/classic-menu-active.png") no-repeat !important;
    background-size: 100% 100% !important;

    &:hover {
      background: url("~@/assets/themes/images/classic-menu-active.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
  }

  .custom-menu-left-item {
    background: url("~@/assets/themes/images/calssic-menu-left.png") no-repeat !important;
    background-size: 100% 100% !important;

    &:hover {
      background: url("~@/assets/themes/images/calssic-menu-hover-left.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
  }

  .custom-active-menu-left-item {
    background: url("~@/assets/themes/images/classic-menu-active-left.png") no-repeat !important;
    background-size: 100% 100% !important;

    &:hover {
      background: url("~@/assets/themes/images/classic-menu-active-left.png") no-repeat !important;
      background-size: 100% 100% !important;
    }
  }

  .map-op-popover-container {
    box-shadow: 0 0 9px 0 #042ea5 inset;
    background: #061e74c7;

    .panel-header-row {
      background-color: #012f8257;
    }

    .mop-tool-icon {
      background: #012f82;

      &.active-tool {
        background: #1a5cd8 !important;
      }
    }
  }

  .common-map-legend .expand-top-container,
  .common-map-legend.expand-top-mode .legend-toggle-button,
  .coordinate-box.pointer-coordinates,
  .ol-overlaycontainer-stopevent .ol-scale-line,
  .coordinate-box {
    box-shadow: 0 0 9px 0 #042ea5 inset !important;
    background: #061e74c7 !important;
  }

  .common-map-legend.expand-left-mode,
  .common-map-legend.expand-left-icon-mode {
    box-shadow: 0 0 9px 0 #042ea5 inset;
    background: #061e74c7;
  }

  .map-layer-controller {
    background: #001e55de;

    & .el-header {
      background-color: #012f8257;
    }
  }

  .legend-bg-black {
    box-shadow: 0 0 9px 0 #042ea5 inset;
    background: #061e74c7;
  }

  .el-container.layer-contrroll {
    background: #001e55de;

    & .el-header {
      background-color: #012f8257;
    }
  }

  .coordinate-box.pointer-coordinates {
    box-shadow: 0 0 9px 0 #042ea5 inset;
    background: #061e74c7;
  }

  .theme-input,
  .theme-select {
    .el-input__inner {
      background: rgba(8, 34, 129, 0.7);
      color: #bccef5;
      border-color: #0260c0;
    }
  }

  .theme-popper {
    background: rgba(8, 34, 129, 0.7);
    border-color: rgba(8, 34, 129, 0.7);
    color: #bccef5;

    .popper__arrow {
      border-bottom-color: rgba(8, 34, 129, 0.7) !important;

      &::after {
        border-bottom-color: rgba(8, 34, 129, 0.7) !important;
      }
    }

    .el-select-dropdown__item {
      color: #bccef5;
    }

    .el-select-dropdown__item.hover {
      background: linear-gradient(0deg, #160872, #2156c0);
    }
  }

  .theme-container {
    background: rgba(8, 34, 129, 0.7);
    border-color: rgba(8, 34, 129, 0.7);
    color: #bccef5;
  }
}
